<template>
  <view>
    <u-navbar title="消息列表" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view
        class="flex justify-between flex-column bg-E9F8FF br-10 m-lr-20 p-lr-20 mt-30 fz-32 lh-45 p-tb-25"
        :class="{'color-CCCCCC' : item.status === '1'}"
        v-for="(item) in messageList"
        :key="item.messageId "
        @tap="readMessage(item)"
    >
      <text>{{item.messageTitle}}</text>
      <text class="mt-10">{{item.createTime}}</text>
    </view>
    <empty-icon v-if="!messageList.length"></empty-icon>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {ownList} from "@/api/basic/message";
import {read} from "../../api/basic/message";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
export default {
  name: "message-list",
  components: {EmptyIcon},
  data() {
    return{
      pageNum: 1,
      pageSize: 10,
      hasNext: false,
      messageList: [],
    }
  },
  onShow(){
    this.pageNum = 1
    this.doQuery().then(res => {
      this.messageList = res.rows
      this.hasNext = res.hasNext
    })
  },
  onReachBottom(){
    if(!this.hasNext) return
    this.pageNum++
    this.doQuery().then(res => {
      this.messageList = this.messageList.concat(res.rows)
      this.hasNext = res.hasNext
    })
  },
  methods:{
    doQuery(){
      return ownList({pageNum: this.pageNum, pageSize: this.pageSize})
    },
    readMessage(item){
      if(item.status === '1') return

      read({messageId: item.messageId}).then(res => {
        if(res.code === 200){
          item.status = '1'
          this.$refs.uToast.show({
            position: 'bottom',
            title: '消息已读',
            type: 'success',
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
page{
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>

</style>
